<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/common.js"></script>
</head>
<body>
    <button id="btn">点击清除</button>
</body>
<script>

    // 回调函数 -> 把函数当成参数(实参)传入到另一个函数中,让它在另一个函数执行中

    // 计时器  -> 每隔指定时间,执行既定的操作  

    // 设置计时器
    // setInterval(callback,interval,arg1,arg2,...argN) 
    // callback 传入一个函数=>每隔固定时间执行的操作(回调函数)
    // interval 间隔时间(单位ms)

    // 返回值: 计时器的编号(计时器可以同时启动多个,返回一个唯一的编号,后面可以根据计时器的编号清除计时器)

    // 注意:
    // 1. 从计时器开始设置,到第一次执行回调函数,需要先等待指定时间 
    // 2. 页面加载时,计时器中的函数不会执行,等页面加载完毕,计时器才会计时执行 (计时器从启动到执行需要时间 页面不等它)  -> 不是很准确,方便大家理解
    // 3. 如果传入的回调函数需要接收参数,从第三参数开始依次向后传

    // 清除计时器:
    // clearInterval(计时器编号)    对应计时器编号清除

    var btn = document.getElementById("btn");

    // 页面加载时绑定事件 -> 点击时才执行
    btn.onclick = function(){ // 点击时执行
        clearInterval(timer1);
        clearInterval(timer2);
        clearInterval(timer3);
    }

    // 页面加载时执行
    // 每隔1s 加 1 
    var count = 0; //计数 
    var timer1 = setInterval(function(){ // 1s后执行 -> 之后每隔1s执行一次
        count ++;
        console.log("count:",count);
    },1000);
    console.log("timer1:",timer1);

    // 每隔一秒打印 666
    var timer2 = setInterval(function(){ // 1s后执行 -> 之后每隔1s执行一次
        console.log("打印:666");
    },1000);
    console.log("timer2:",timer2);

    // 每隔一秒 随机验证码
    var timer3 = setInterval(function(){ // 1s后执行 -> 之后每隔1s执行一次
        var code = randCode();
        console.log("验证码",code);
    },1000);
    console.log("timer3:",timer3);





    









</script>
</html>